---
title: Spacing
description: Consistent spacing makes the interface cleared and easier to scan
---

Our spacing is based on a 4-pixel grid.
Please use only these sizes:

| Size name | Value | Examples of use                                                                |
| --------- | ----- | ------------------------------------------------------------------------------ |
| xx-small  | `4`   | Great for really small spaces such as connecting an error message to a form.   |
| x-small   | `8`   | Great to connect related components, like a header and a description.          |
| small     | `12`  |                                                                                |
| medium    | `16`  | Great for inner padding, like left & right padding for content on mobile apps. |
| large     | `24`  | Great for left & right inner padding in sections.                              |
| x-large   | `32`  |                                                                                |
| xx-large  | `40`  |                                                                                |
| xxx-large | `52`  | Great for space between illustrations and headers.                             |
